@mixin slider-size($height, $handle-size, $dot-top) {
  height: $height !important;

  & .ant-slider-step {
    height: $height !important;
  }

  & .ant-slider-mark {
    top: $dot-top !important;
  }

  & .ant-slider-track {
    background: linear-gradient(90deg, #1b6dfa 0%, #00d0fe 181.25%);
    height: $height !important; // 可选：调整轨道高度
    border-radius: 20px !important;
  }

  & .ant-slider-rail {
    background: var(--line-2) !important;
    height: $height !important; // 可选：调整轨道高度
    border-radius: 20px !important;
  }

  & .ant-slider-handle {
    width: $handle-size !important;
    height: $handle-size !important;

    &::after,
    &::before {
      width: $handle-size !important;
      height: $handle-size !important;
      background-size: $handle-size $handle-size !important;
    }
  }
}

.modelSlider {
  // height: 10px !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;

  @include slider-size(10px, 20px, 16px);

  &--small {
    @include slider-size(4px, 12px, 8px);
  }

  & .ant-slider-dot {
    display: none !important;
  }

  // & .ant-slider-mark {
  //   top: 16px !important;
  // }

  // & .ant-slider-step {
  //   height: 10px !important;
  // }

  &.ant-slider.ant-slider-disabled .ant-slider-track {
    background: var(--brand-color-disabled) !important;
  }

  &.ant-slider.ant-slider-disabled .ant-slider-handle {
    &::after {
      outline: 2px solid white !important;
      box-shadow: none !important;
    }

    &:hover {
      &::after {
        outline: 2px solid white !important;
      }
    }

    &:active {
      &::after {
        outline: 2px solid white !important;
      }
    }
  }

  & .ant-slider-handle {
    border: none !important;

    &:hover {
      &::after {
        outline: 2px solid var(--brand-color-hover) !important;
      }
    }

    &:active {
      &::after {
        outline: 2px solid var(--brand-color-active) !important;
      }
    }

    &::after {
      // width: 20px !important;
      // height: 20px !important;
      background: url('../../../assets/icons/slider.svg') no-repeat center center;

      // background: url('../../../assets/icons/slider.svg') no-repeat center center;
      // mask: url('../../../assets/icons/slider.svg') no-repeat center center;
      // background-color: #ff0000 !important; // 你想要的颜色

      border: none !important;
      box-shadow: 0px 0px 5px 0px #474c5f26, 0px 2px 4px -1px #0000001f, 0px 4px 5px 0px #00000014,
        0px 1px 10px 0px #0000000d !important;
      // box-shadow: 0 0 10px 0 #474c5f26 !important;
      inset-inline-start: -2px !important;
      inset-block-start: -2px !important;
      outline: 2px solid transparent !important;
    }

    &::before {
      // width: 20px !important;
      // height: 20px !important;
      border: none !important;
    }
  }
}
